<template>
  <div class="person">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button v-on:click="changeName">修改名字</button>
    <button v-on:click="changeAge">修改年龄</button>
    <button v-on:click="showTel">查看联系方式</button>
  </div>
</template>


<script lang="ts" setup>
import { ref, watch } from 'vue'
let person = ref({
  name: '张三',
  age: 18,
  tel: '110'
})


function changeName() {
  person.value.name = '李四'
}
function changeAge() {
  person.value.age += 1
}
function showTel() {
  alert(person.value.tel)
}

const stopWatch = watch(person, (newValue, oldValue) => {
  console.log('person变化了', newValue, oldValue)
  if (newValue.age > 25) {
    stopWatch()
  }
}, { deep: true })

</script>

<style scoped>
.person button {
  margin: 5px 10px;
  /* 上下间距为5px，左右间距为10px */
  padding: 10px 20px;
  /* 内边距：上下10px，左右20px */
  background-color: #af844c;
  /* 背景颜色 */
  color: white;
  /* 字体颜色 */
  border: none;
  /* 无边框 */
  border-radius: 10px;
  /* 边框圆角半径 */
  cursor: pointer;
  /* 鼠标指针形状 */
  font-size: 16px;
  /* 字体大小 */
}

.person button:hover {
  background-color: #a04545;
  /* 当鼠标悬停在按钮上时的背景颜色 */
}
</style>